<template>
  <div class="bonus">
    <div class="sub-title">
      <div class="content">测算方案对比</div>
    </div>
    <div class="search-form flex-l-r">
      <div class="flex align-center ">
        <span class="txt-bold mg-r15 line-h-20">测算方案</span>
        <el-radio-group v-model="schemeId" @change="radioSchemeId">
          <el-radio v-for="(item,index) in schemeList" :key="item.id" :label="item.id">
            {{item.computeName}}
          </el-radio>
        </el-radio-group>
      </div>
      <div class="mg-l15">
        <el-button type="primary" @click="submitHandle" class="mg-l15">提交</el-button>
        <el-button type="primary" @click="goBack" plain>返回</el-button>
      </div>
    </div>
    <div>
      <el-table ref="tableRef" :key="tableKey" :data="tableData" v-loading="loading" border  @selection-change="handleSelectionChange" :height="`calc(100vh - 220px )`">
        <!--        <el-table-column
                  type="selection"
                  header-align="center"
                  align="center"
                  width="45">
                </el-table-column>-->
        <el-table-column
          width="60px"
          prop=""
          label="序号"
          align="center"
        >
          <template slot-scope="scope">
            {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <!--        <el-table-column
                  prop=""
                  label="机构名称"
                  align="left"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop=""
                  label="通知单下发额度"
                  align="center"
                  show-overflow-tooltip
                >

                  <el-table-column
                    prop=""
                    header-align="center"
                    label="考核得分"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    label="奖金基数"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    header-align="center"
                    label="单位奖金系数"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    label="下发奖金金额"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>

                </el-table-column>-->

        <template v-for="(item,index) in columns" :prop="item.prop" :label="item.label">
          <el-table-column v-if="item.children && item.children.length > 0"  :prop="item.prop" :label="item.label"  :key="item.id">
            <template slot="header">
              <div class="flex" v-show="item.show"  @click="expand(item)">
                <span >{{item.label}}</span><span class="flex flexible-box" ><i class="el-icon-caret-left"></i></span>
              </div> <!--class="txt-ellipse w90"-->
              <div class="flex" v-show="!item.show" @click="expand(item)">
                <span>{{item.label}}</span><span class="flex  flexible-box"><i class="el-icon-caret-right"></i></span>
                <!-- class="txt-ellipse w90"--->
              </div>
            </template>
            <template v-for="(_item,_index) in item.children" >
              <el-table-column v-if="_item.show"   :key="_index" :prop="_item.prop" :label="_item.label">
              </el-table-column>
            </template>
          </el-table-column>
          <el-table-column v-else  :prop="item.prop" :label="item.label" :key="item.id">
          </el-table-column>
        </template>

        <!--        <el-table-column v-for="(item,index) in columns" :key="index" :prop="item.prop" :label="item.label">
                    <template slot="header">
                      <div class="flex" v-show="item.show"  @click="expand(item)">
                        <span class="txt-ellipse w90">{{item.label}}</span><span class="flex flexible-box" ><i class="el-icon-caret-left"></i></span>
                      </div>
                      <div class="flex" v-show="!item.show" @click="expand(item)">
                        <span class="txt-ellipse w90">{{item.label}}</span><span class="flex  flexible-box"><i class="el-icon-caret-right"></i></span>
                      </div>
                    </template>
                    <template v-for="(_item,_index) in item.children" >
                      <el-table-column v-if="_item.show"   :key="_index" :prop="_item.prop" :label="_item.label">
                      </el-table-column>
                    </template>
                </el-table-column>
                <el-table-column
                  prop="scheme"
                  label="2023年上半年奖金方案1"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot="header" slot-scope=" { column, $index }">
                    <span>2023年上半年奖金方案1*</span>
                  </template>
                  <el-table-column
                    prop="dwtjxs"
                    header-align="center"
                    label="单位调节系数"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="dwtjhje"
                    label="单位调节后金额"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="jly"
                    header-align="center"
                    label="奖励一（标准化）"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="kfy"
                    label="扣罚一（标准化）"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="tjje"
                    label="调整金额"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="count"
                    label="合计"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>

                </el-table-column>
                <el-table-column
                  prop=""
                  label="2023年上半年奖金方案2"
                  align="center"
                  show-overflow-tooltip
                >
                  <el-table-column
                    prop=""
                    header-align="center"
                    label="单位调节系数"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    label="单位调节后金额"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    header-align="center"
                    label="奖励一（标准化）"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    label="扣罚一（标准化）"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    label="调整金额"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop=""
                    label="合计"
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>

                </el-table-column>-->

      </el-table>
    </div>
  </div>
</template>

<script>
import {getDynamicColumns} from '@/api/bonus/calculateorgprogramme'
import {submitTask} from "@/api/bonus/calculateexamineorg"
export default{
  name:"decompose",
  components:{
  },
  data() {
    return {
      show:true ,
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [
        /* {
           dwtjxs : 1 ,
           dwtjhje : 2 ,
           count : 3
         }*/
      ],
      ids:[],
      bonusItem:{},
      schemeList: [],
      schemeId:'',
      formData:{},
      columns:[
        /*{
          label: '方案一方案一方案一',
          prop: 'fay',
          show:true,
          children:[
            {prop: 'dwtjxs', label: '单位调节系数',show:true},
            {prop: 'dwtjhje', label: '单位调节后金额',show:true},
            {prop: 'jly', label: '奖励一（标准化）',show:true},
            {prop: 'kfy', label: ' 扣罚一（标准化）',show:true},
            {prop: 'tjje', label: '调整金额',show:true},
            {prop: 'count', label: '合计',show:true},
          ]
        },
        {
          label: '方案二',
          prop: 'faytwo',
          show:true,
          children:[
            {prop: 'dwtjxs', label: '单位调节系数1',show:true},
            {prop: 'dwtjhje', label: '单位调节后金额2',show:true},
            {prop: 'jly', label: '奖励一（标准化）3',show:true},
            {prop: 'kfy', label: ' 扣罚一（标准化）4',show:true},
            {prop: 'tjje', label: '调整金额5',show:true},
            {prop: 'count', label: '合计6',show:true},
          ]
        }*/
      ],
      tableKey:new Date().getTime(),
      width:'200px'
    }
  },
  computed: {

  },
  created(){

  },
  methods:{
    init(res,schemeIds){
      //外层列表对象
      this.formData = res
      //选择的方案ids
      this.ids = schemeIds ;
      //获取动态列
      this.getDynamicColumns() ;
    },
    getDynamicColumns(){
      this.loading = true ;
      getDynamicColumns({ids: this.ids.toString()}).then(res=>{
        if (res.data.code == 0){

          this.schemeList = res.data.data.computeDeptList
          this.columns = res.data.data.bonusColumnList

          //构筑值
          if(res.data.data.dataList.length != 0){
            var array = []
            res.data.data.dataList.map((item,index) =>{
              const dtObject = {}
              item.map(item2 =>{
                dtObject[item2.prop] = item2.propValue
              })
              array.push(dtObject)
              this.tableData = array
            })
          }
          this.mapTree(this.columns) //遍历树，每个节点添加属性 show ,初始将每个列都展开
        }
        this.loading = false ;
      }).finally(()=>{
        this.loading = false ;
      }).catch(err=>{

      })

    },
    //遍历tree
    mapTree (data) {
      data.forEach(items => {    //遍历树 拼入相应的元素
        //当前元素条件判断
        items.show = true //添加新属性
        if (items.children) {
          //根据孩子元素的条件进行判断
          for(let item of items.children){
            item.show = true //添加新属性
          }
          this.mapTree(items.children)
        }
      })
    },
    onLoad(){
      //this.loading = true ;
      getChildren(this.bonusItem.id,this.deptId).then(res=>{
        if (res.data.code == 0){
          this.tableData =  []
          //this.doLayout() ;
        }else{
          this.$message.error(res.data.msg)
        }
        this.loading = false ;
      }).catch(()=>{
        this.loading = false ;
      })
    },
    radioSchemeId(e){
      console.log(e)
    },
    submitHandle(){
      this.schemeList.forEach((item,index) =>{
        if(item.id == this.schemeId){
          this.schemeRadioName = item.computeName
        }
      })
      let pjObject = {
        deptComputeId:this.schemeId,
        deptComputeName:this.schemeRadioName
      }
      this.formData["bonusPartialSchemeChoice"] = pjObject
      console.log(this.formData)
      this.$confirm('确定要提交到审批流吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true ;
        submitTask(this.formData).then(res=>{
          if (res.data.code == 0){
            this.goBack()
            this.$message.success('提交成功')
          }
          this.loading = false ;
        }).finally(()=>{
          this.loading = false ;
        })
      }).catch(() => {

      });
    },
    handleQuickCheckedComputesChange(item){
      console.log(item)
    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
    },
    goBack(){
      this.tableData = []
      this.$emit('close')
    },
    refresh(){

    },
    //列展开收起
    expand(item){
      item.show = !item.show
      item.children.map((_item,index)=>{
        if (item.children.length == (index + 1)){ //第二级列留一列显示，其他列隐藏
          return ;
        }
        _item.show = !_item.show
      })
      this.tableKey ++
      this.$refs.tableRef.doLayout() ;
    }
  }
}
</script>
<style scoped>

</style>
